<template>
	<view>
		<cu-custom :bgColor="globalData.bgColor" :isBack="true">
			<template #content>
				<text class="text-darkgrey">详情</text>
			</template>
		</cu-custom>
		<view>
			<view class="bg-white solid-top">
				<view class="padding-lr flex align-center">
					<image :src="shopInfo.imgUrl" class="cu-avatar solid" />
					<view>{{ shopInfo.name }}</view>
				</view>
				<view class="padding-lr margin-top-sm  padding-bottom">
					<view class="flex justify-between">
						<view class="text-darkgrey">
							<view class="text-df">直播间ID: {{ data.id }}</view>
						</view>
						<view class="flex">
							<view v-if="data.liveStatus == 0" class="text-xs light round pay bg-blue">未开始</view>
							<view v-else-if="data.liveStatus == 1" class="text-xs light round pay bg-green">直播中</view>
							<view v-else-if="data.liveStatus == 2" class="text-xs light round pay bg-gray">已结束</view>
							<view v-else-if="data.liveStatus == 3" class="text-xs light round pay bg-orange">暂停</view>
							<view v-else-if="data.liveStatus == -1" class="text-xs light round pay bg-red">违规下架</view>
							<view v-if="data.roomTop == 1" class="text-xs light round pay bg-green">已置顶</view>
						</view>
					</view>
					<view class="flex justify-between">
						<view>
							<view>直播名称: {{ data.name }}</view>
							<view>直播用户ID: {{ data.userId }}</view>
							<view>直播时间: {{ data.startTime }} 至 {{ data.endTime }}</view>
							<view class="text-sm text-purple-grey flex justify-end">{{ $t('order.detail.8l5h7y') }}{{ data.createTime }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="margin-top-xs bg-white">
				<scroll-view scroll-x class="cu-bar nav bg-white" style="box-shadow: none">
					<view class="flex text-center">
						<view @click="curShow = 'liveInfo'" class="cu-item flex-sub" :class="curShow == 'liveInfo' ? 'cur' : ''">直播信息</view>
						<view @click="curShow = 'userInfo'" class="cu-item flex-sub" :class="curShow == 'userInfo' ? 'cur' : ''">主播信息</view>
						<view @click="curShow = 'goodsInfo'" class="cu-item flex-sub" :class="curShow == 'goodsInfo' ? 'cur' : ''">直播商品({{ goodsList.length }})</view>
					</view>
				</scroll-view>
				<view v-if="curShow == 'liveInfo'" class="padding">
					<!-- 直播间信息 -->
					<view class="flex margin-top-sm">
						<view class="text-darkgrey">封面图</view>
						<view class="flex-sub flex align-center justify-center margin-left-sm solid">
							<image :src="data.feedsImg" style="width: 100%" />
						</view>
					</view>
					<view class="flex margin-top-sm">
						<view class="text-darkgrey">背景图</view>
						<view class="flex-sub flex align-center justify-center margin-left-sm solid">
							<image v-if="data.coverImg" :src="data.coverImg" style="width: 100%" />
							<view v-else class="padding text-gray">没有数据</view>
						</view>
					</view>
					<view class="flex margin-top-sm">
						<view class="text-darkgrey">分享图</view>
						<view class="flex-sub flex align-center justify-center margin-left-sm solid">
							<image :src="data.shareImg" style="width: 100%" />
						</view>
					</view>
				</view>
				<view v-if="curShow == 'userInfo'">
					<!-- 用户 -->
					<view class="bg-white padding">
						<view class="flex justify-between padding-bottom-xs text-sm">
							<text class="text-purple-grey">用户昵称:</text>
							<text class="text-purple-grey">{{ liveUserInfo.nickName }}</text>
						</view>
						<view class="flex justify-between padding-top-xs padding-bottom-xs text-sm">
							<text class="text-purple-grey">用户名:</text>
							<text class="text-purple-grey">{{ liveUserInfo.username }}</text>
						</view>
						<view class="flex justify-between padding-top-xs padding-bottom-xs text-sm">
							<text class="text-purple-grey">手机号:</text>
							<text class="text-purple-grey">{{ liveUserInfo.phone }}</text>
						</view>
						<view class="flex justify-between padding-top-xs padding-bottom-xs text-sm">
							<text class="text-purple-grey">头像:</text>
							<text class="text-purple-grey"><image class="cu-avatar" :src="liveUserInfo.avatar" /></text>
						</view>
					</view>
				</view>
				<view v-if="curShow == 'goodsInfo'">
					<!-- 商品 -->
					<view class="cu-item bg-white solid-bottom" v-for="data in goodsList" :key="data.id">
						<view class="flex justify-between padding-right">
							<view class="flex align-center padding-top padding-left-sm padding-bottom-sm">
								<text class="text-darkgrey text-df margin-right-xs cuIcon-shop"></text>
								<view class="text-darkgrey text-df text-to-long">{{ data.name }}</view>
							</view>
							<view class="text-xs cu-tag light round margin-top-sm" :class="data.shelf == 1 ? 'bg-cyan' : 'bg-red'">
								{{ data.shelf == 1 ? $t('coupon.counponinfo-detail.n703z9') : $t('coupon.counponinfo-detail.39j6cc') }}
							</view>
						</view>
						<view class="cu-list menu-avatar flex justify-between padding-left">
							<view class="cu-avatar img-box" :style="{ 'background-image': data.picUrls ? 'url(' + data.picUrls[0] + ')' : '' }"></view>
							<view class="content flex-sub padding-left padding-right text-sm">
								<view class="text-purple-grey flex justify-between margin-top-xs">{{ $t('coupon.counponinfo-detail.63636w') }}{{ data.saleNum }}</view>
								<view class="">
									<text class="text-red text-price text-xl text-bold">{{ data.priceDown }}</text>
									<text class="text-red text-xl text-bold" v-show="data.priceUp && data.priceDown != data.priceUp">
										{{ ' - ' }}
										<text class="text-red text-price text-xl text-bold">{{ data.priceUp }}</text>
									</text>
								</view>
								<view class="flex justify-end">
									<navigator :url="'/pages/mall/goodsspu/detail?id=' + data.id" class="cu-btn round sm bg-blue">
										{{ $t('goodsspu.list.2c3gx3') }}
									</navigator>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 用来保证底部高度 -->
		<view class="cu-tabbar-height margin-bottom"></view>
	</view>
</template>

<script>
import { getObj, addObj, putObj, delObj } from '@/api/live/liveroom';
import { getListByIds } from '@/api/mall/goodsspu';
import { getObj as getObjUser } from '@/api/upms/user.js';
import { getObj as getObjShop } from '@/api/mall/shopinfo';

import shopStoreInfo from '@/components/shop-store-info/index.vue';

export default {
	components: {
		shopStoreInfo
	},
	onLoad(e) {
		if (e) {
			this.id = e.id;
		}
	},
	onShow(e) {
		if (this.id) {
			this.getData();
		}
	},
	data() {
		return {
			globalData: getApp().globalData,
			CustomBar: this.CustomBar,
			id: null,
			orderNo: null,
			data: {},
			listOrderItem: [],
			showModal: false,
			editPriceForm: {
				id: null,
				paymentPrice: 0
			},
			showLogisticsModal: false,
			itemOrderLogistics: {},
			listOrderLogisticsDetail: [], //物流信息
			goodsList: [],
			curShow: 'userInfo',
			liveUserInfo: {},
			shopInfo: {}
		};
	},
	methods: {
		getData() {
			getObj(this.id).then((response) => {
				if (response.data) {
					this.data = response.data;
					this.getGoodsData(response.data.goodsSpuIds);
					this.getUserInfo(response.data.userId);
					this.getShopInfo(response.data.shopId);
				}
			});
		},
		getUserInfo(userId) {
			getObjUser(userId).then((res) => {
				this.liveUserInfo = res.data;
			});
		},
		getShopInfo(shopId) {
			getObjShop(shopId).then((res) => {
				this.shopInfo = res.data;
			});
		},
		getGoodsData(goodsSpuIds = []) {
			getListByIds(goodsSpuIds)
				.then((res) => {
					// 对接口返回的商品顺序进行排序
					let goods = new Array(goodsSpuIds.length);
					res.data.map((item) => {
						let index = goodsSpuIds.indexOf(item.id);
						goods[index] = item;
					});
					// 如果是下架或删除的商品则去掉
					let goodsNew = [];
					goods.map((item, index) => {
						if (item && !(item.shelf == '0' || item.enable == '0')) {
							goodsNew.push(item);
						}
					});
					this.goodsList = goodsNew;
				})
				.catch(() => {
					this.goodsList = this.goodsList || [];
				});
		},
		getPageOrderItem() {
			let querySearch = '?orderNo=' + this.orderNo;
			getPage(querySearch).then((response) => {
				if (response.data) {
					this.data.listOrderItem = response.data.records.length > 0 ? response.data.records[0].listOrderItem : [];
					this.getlogisticsList();
				}
			});
		},
		inputChange($event) {
			this.editPriceForm.paymentPrice = $event.target.value;
		},
		//加载物流列表信息
		getlogisticsList() {
			getPageOrderlogistics({ orderId: this.id }).then((response) => {
				let listOrderLogistics = response.data.records || [];
				if (listOrderLogistics && listOrderLogistics.length > 0) {
					this.data.listOrderItem.map((item) => {
						// 2.取出物流的订单的商品信息
						let orderLogistics = listOrderLogistics.filter((item2) => {
							return item.logisticsId == item2.id;
						});
						if (orderLogistics && orderLogistics.length > 0) {
							item.orderLogistics = orderLogistics[0];
						}
					});
				}
			});
		},
		//加载物流信息
		showOrderLogisticsDetail(row) {
			this.itemOrderLogistics = row.orderLogistics;
			getObjOrderlogistics(row.orderLogistics.id).then((response) => {
				this.showLogisticsModal = true;
				this.listOrderLogisticsDetail = response.data.listOrderLogisticsDetail || [];
			});
		}
	}
};
</script>

<style>
.img-box {
	width: 100rpx !important;
	height: 100rpx !important;
}

.pay {
	padding: 10rpx 20rpx 10rpx 20rpx;
}

.button-bg {
	padding: 20rpx 40rpx 20rpx 40rpx;
}
</style>
